<template>
  <div>
    <!-- tabs标签页 -->
    <div class="g-layout-header-tabs">
      <van-tabs class="van-tabs" v-model:active="active" lazy-render swipeable @change="jumpTab" @rendered="jumpTab">
        <van-tab
          v-for="(item, index) in tabList"
          :title="item.title"
          :to="{ name: item.name }"
          :name="item.name"
          :key="index"
        >
          <!-- 内容 {{ index }} -->
          <!-- <pull-box></pull-box> -->
          <!-- <div v-if="item.name == active">
            <router-view></router-view>
          </div> -->
        </van-tab>
      </van-tabs>
      <img id="tabs-img" src="../../assets/icon-img/fenlei.png" alt="" @click="classifyBtn" />
    </div>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
export default {
  components: {},
  setup() {
    const tab = [
      {
        title: '推荐',
        name: 'topSearch'
      },
      {
        title: '精选',
        name: 'choiceness'
      },
      {
        title: '合集',
        name: 'compilations'
      },
      {
        title: '小视频',
        name: 'smallVideo'
      },
      {
        title: '影视',
        name: 'filmsAndTelevision'
      }
    ]
    const tabList = reactive(tab)
    const onClickLeft = () => history.back()
    const active = ref('topSearch')
    const router = useRouter()

    const jumpTab = (name) => {
      router.push({ name })
    }
    onMounted(() => {
      jumpTab()
    })
    return {
      tabList,
      active,
      onClickLeft,
      jumpTab
    }
  },
  created() {
    console.log(this.tabList, 'tabList')
  }
}
</script>

<style lang="scss" scoped>
// 分类tab标签页
.g-layout-header-tabs {
  position: relative;
  width: 100vw;
  #tabs-img {
    position: absolute;
    right: 5px;
    top: 5px;
    background-color: #ffffff;
    height: 3.5vh;
  }
}
</style>
